<template>
  <view :class="ns.b()">
    <template v-for="menu in menus" :key="menu.key">
      <view
        :disabled="menu.disabled"
        :class="[ns.e('flex-btn'), ns.is('selected', menu.key === selected)]"
      >
        <next-bubble-menu
          v-if="menu.children"
          :dataList="menu.children"
          :bingEleId="menu.key"
          :d-width="200"
          :relativeAllow="6"
          @change="(item) => onClick(item)"
        >
          <view :id="menu.key" class="flex-line">
            <text>{{ menu.label }}</text>
          </view>
        </next-bubble-menu>
        <view :class="ns.e('item')" v-else @click="(event) => onClick(menu, event)">
          <view v-if="menu.image" :class="ns.em('item', 'icon')">
            <iBizIcon :icon="menu.image"></iBizIcon>
          </view>
          <view :class="ns.em('item', 'label')">{{ menu.label }}</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
import { AppMenuController } from '@ibiz-template/runtime'
import { useControlController } from '@ibiz-template/vue3-util'
import { defineProps, ref, PropType } from 'vue'
import nextBubbleMenu from './next-bubble-menu.vue'
import { useNamespace } from '@/use'

const props = defineProps({
  modelData: { type: Object as PropType<any>, required: true },
  context: { type: Object as PropType<any>, required: true },
  params: { type: Object as PropType<any>, default: () => ({}) },
  provider: { type: Object as PropType<any> },
  collapse: Boolean,
  currentPath: String,
})

// const c = useControlController((...args) => new AppMenuController(...args))

/**
 * 递归生成菜单数据，递给 element 的 Menu 组件
 *
 * @author chitanda
 * @date 2022-07-25 10:07:28
 * @param {AppMenuItemModel[]} items
 * @return {*}  {any[]}
 */
const getMenus = (items: any[]) => {
  return items.map((item) => {
    const data: any = {
      key: item.id,
      label: item.caption,
      image: item.sysImage,
      counterId: item.counterId,
      disabled: !item.appFuncId,
      tooltip: item.tooltip,
      itemType: item.itemType,
    }
    if (item.appMenuItems?.length) {
      data.children = getMenus(item.appMenuItems)
    }
    return data
  })
}

const ns = useNamespace('menu')
const selected = ref('')

const onClick = async (item: any, event?: MouseEvent): Promise<void> => {
  console.log('item', item, event)
  selected.value = item.key
  // const activeMenu = calcCurMenu()
  // // 如果点击的是当前的菜单项，拦截掉
  // if (activeMenu?.id === item.key) {
  //   return
  // }
  // defaultActive.value = item.key
  // await c.onClickMenuItem(item.key, event)
}

const menus = ref<any[]>(getMenus(props.modelData.appMenuItems!))
</script>

<style lang="scss" scoped>
$menu: (
  menu-height: 40px,
  menu-icon-size: 16px,
  select-color: rgb(33, 167, 244),
);
@include b('menu') {
  @include set-component-css-var(menu, $menu);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: space-around;
  height: getCssVar(menu, menu-height);
  border: 1px solid #e0e0e0;
  @include e('menu-bar') {
    display: flex;
    flex-direction: column;
  }
  @include e('item') {
    display: flex;
    align-items: center;
    justify-content: center;
    @include m('icon') {
      width: getCssVar(menu, menu-icon-size);
      height: getCssVar(menu, menu-icon-size);
      font-size: getCssVar(menu, menu-icon-size);
    }
    @include m('label') {
      margin-left: 4px;
    }
  }
  @include e('flex-btn') {
    display: flex;
    flex: 1;
    justify-content: center;
    height: getCssVar(menu, menu-height);
    text-align: center;
    @include when('selected') {
      color: getCssVar(menu, select-color);
      // background: rgb(33, 167, 244);
      border-radius: 25%;
    }
  }
}
</style>
